<template>
  <div class="flex-1 relative cover-container flex flex-col">
    <ImageHead></ImageHead>
    <div v-if="cropperImage" class="flex-1">
      <cropper
        class="cover"
        :auto-zoom="cropperProps.zoom"
        :stencil-props="cropperProps.stencilProps"
        :src="cropperImage"
        @change="change"
        ref="cropperRef"
        :stencil-size="stencilSize"
        image-restriction="stencil"
        priority="visibleArea"
        :default-position="{
          left: 100,
          top: 100,
        }"
        :default-size="{
          width: 400,
          height: 400,
        }"
        :stencil-component="stencilTypes[cropperProps.stencil]"
      />
      <div v-if="cropperResult" class="preview flex">
        <Preview
          :width="120"
          :height="120"
          :image="cropperResult.image"
          :coordinates="cropperResult.coordinates"
        ></Preview>
      </div>
    </div>
  </div>
  <CropperTools />
</template>

<script setup lang="ts">
import { Cropper, Preview } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';
import {
  cropperImage,
  cropperProps,
  cropperRef,
  cropperResult,
  stencilSize,
  stencilTypes,
} from '../data/data';
import { type CropperData } from '../data/types';
import CropperTools from './footer/CropperTools.vue';
import ImageHead from './head/ImageHead.vue';

const change = (config: CropperData) => {
  cropperResult.value = config;
};
</script>

<style lang="scss" scoped>
.cover-container {
  .cover {
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  .upload-button {
    width: 240px;
    margin-top: 34px;
  }
  .preview {
    position: absolute;
    bottom: 2px;
    z-index: 10;
    right: 2px;
    border-radius: var(--radius);
  }
}
</style>
